<link rel="stylesheet" href="/js/jquery-confirm/jquery-confirm.min.css">

<i class="fa fa-eye" id="fa-eye-{{ $id }}" data-toggle="modal" data-target="#myModal{{ $id }}"></i>
<div class="modal fade" id="myModal{{ $id }}" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
     aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true" style="font-size: 36px;">&times;</button>
                <h4 class="modal-title" id="myModalLabel">物流信息</h4>
            </div>
            <div class="modal-body">
                <div class="deliver-tab">

                </div>
                <div class="deliver-tab-content">

                </div>
            </div>
        </div>
    </div>
</div>
<input hidden name="package_no_{{ $id }}" value="{{ $expressNumber }}" />

<script src="/js/jquery-confirm/jquery-confirm.min.js"></script>
<script src="/js/utils/ajaxFunc.js"></script>
<script>
    var newAuth = '{{ $newAuth }}';
    var serialNumber = '{{ $serialNumber }}';

    // 点击打开弹窗
    $('#fa-eye-{{ $id }}').on('click', function () {
        let packageListStr = $("input[name='package_no_{{ $id }}']").val()
        let packageList = packageListStr ? packageListStr.split(',') : []

        $('.deliver-tab').empty();
        let tabItemStr = ''
        packageList.map((item, index) => {
            tabItemStr += `<span data-index="${index}" data-no="${item}" class="${index==0?'active': ''}">包裹${index+1}<\/span>`
        })
        $('.deliver-tab').append(tabItemStr);
        getPackageInfo(packageList[0])
    })

    // tab切换
    $('.deliver-tab').on('click', 'span', function () {
        if(!$(this).hasClass('active')) {
            let index = $(this).data('index');
            let itemNo = $(this).data('no');

            $('.deliver-tab span').removeClass('active');
            $(this).addClass('active');

            getPackageInfo(itemNo)
            {{--$('.content-item').css('display', 'none');--}}
            {{--$('#myModal{{ $id }} .content-item').eq(index).css('display', 'block');--}}
        }
    })

    function getPackageInfo(serialNumber) {
        $('.deliver-tab-content').empty();
        ajaxPostFunc('/v1/api/logistic/logisticInfo', {
            // _token: $.admin.token,
            serialNumber: serialNumber
        }, {
            newAuth: newAuth
        }, res => {

            if(res?.info) {
                let contentItemStr = ''
                if(res.info?.data?.length) {
                    res.info.data.map(v => {
                        contentItemStr += `<div class="deliver-timeline-item">
                            <span class="item-dot"><\/span>
                            <div class="item-content">
                                <p>${v.context}<\/p>
                                <h4>${v.time}<\/h4>
                            <\/div>
                        <\/div>`
                    })
                }
                $('.deliver-tab-content').append(`<div class="content-item">
                    <div class="deliver-no">物流单号：${res.express_no}<\/div>
                    <div class="deliver-timeline">
                        ${contentItemStr}
                    <\/div>
                <\/div>`);
            } else {
                $('.deliver-tab-content').append(`<div class="content-item">
                    <div class="deliver-no">物流单号：${res?.expressNo || res?.express_no}<\/div>
                    <div class="deliver-timeline">
                        <div class="deliver-no" style="margin-bottom: 50px;color: #999;">${res?.message || '暂无物流信息~'}<\/div>
                    <\/div>
                <\/div>`);
            }
        })
    }
</script>

<style scoped>
    .modal-body{
        max-height: 65vh;
        overflow-y: scroll;
    }
.fa-eye {
    cursor: pointer;
    font-size: 20px;
}
.deliver-empty-text {
    text-align: center;
    font-size: 18px;
    line-height: 200px;
}
.deliver-no {
    font-size: 18px;
}
.deliver-timeline {
  margin-top: 20px;
}
.deliver-timeline-item {
    display: flex;
    height: 80px;
}
.item-dot {
    width: 12px;
    height: 12px;
    background-color: #999;
    border-radius: 50%;
    margin-top: 10px;
    position: relative;
}
.deliver-timeline-item:not(:nth-child(1)) .item-dot::before {
    content: '';
    position: absolute;
    top: -58px;
    left: 6px;
    width: 1px;
    height: 50px;
    background: #ccc;
}
.item-content {
    margin-left: 25px;
    flex: 1;
}
.item-content p {
    word-wrap: break-word;
    white-space: pre-wrap;
    margin-bottom: 2px;
    font-size: 14px;
}
.item-content h4 {
    margin: 0;
    font-weight: bold;
    color: #888;
    font-size: 13px;
}
.deliver-tab {
    display: flex;
    margin-bottom: 30px;
}
.deliver-tab span {
    padding: 6px 12px;
    border: 1px solid #ccc;
	cursor: pointer;
}
.deliver-tab .active {
    background: #ccc;
}
.content-item {
    /*display: none;*/
}
</style>
